@charset "UTF-8";
/* CSS Document. */ 
@import "style-2.css";

/* Images */
@bgImage: "../images/ti.jpg";
@logo: "../images/icon-uh-logo.png";
 
/* Basic Colors. */
@content-box-bgColor: #EBE7BC;
@linkColor: black;
@headerLinkColor: black;
@textColor: black;
@subHeaderTextColor: black;
@subHeaderBGColor: white;
@navBarTextColor: #666;  /*grey*/
@infobarTextColor: red; 
@altRowBGColor: #EBDB78;

/* Gradient Colors. */
@darkOj: #EFB820; 
@widgetHighlight: white;
@widgetHighlightPercent: 60%;

@pageHeaderLightOj: darken(rgba(239, 214, 120,.8),20%);
@pageHeaderHighlight: rgba(255, 255, 255,.8);
@pageHeaderHighlightPercent: 38%;

@questBarHighlightPercent: 25%;

@landingPageGradient: @darkOj;
@landingPageHighlight: white;
@landingPagePercent: 40%;
 
    
/* SGG Colors. */
@SGGActivity: #35D400;
@SGGCommitment: #0022D4;
@SGGEvent: #D44900;
@SGGSurvey: #EFEA00;
@SGGExcursion: #D4001A;



.border {
    border: 2px solid #444; 
}

.gradient (@light, @dark, @percentage) { 
    background-image: -moz-linear-gradient(100% @percentage 90deg, @dark, @light); 
    background-image: -webkit-gradient(
        linear, left top, left bottom, color-stop(0%,@light), color-stop(@percentage,@dark)); 
}

/* ========================== BODY ====================== */
// logo
/* set the logo */
.brand img {
	background: transparent url("@{logo}") top left no-repeat;
	display: block;
	margin: 0 auto;
}

body {
    font: normal 10pt Arial, Helvetica, sans-serif; 
    color: @textColor; 
    /* Runs the background image. */
    background: url("@{bgImage}") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}  

h6 {
    color: @textColor;
}
/* Link colors. */
a  {
    color: @linkColor;
}
 
#navbar > a, #info-bar-single > a, #info-bar-wide > a, #quest-bar > a, #quest-list li a, .navbar .nav > li > a, .navbar .dropdown-menu a {
    color: @headerLinkColor
}
/* Secondary headers. */
 #profile-badges-content h5, #profile-history-content h5, th ,thead#profile-form-table td.profile-section-header ,#profile-form-general-header, 
.profile-section-header {
    background-color: @subHeaderBGColor; 
    color: @subHeaderTextColor;
    font-weight: bold;
}

/* ========================== HEADER BAR ====================== */
/* Transparent header gradient. */
#info-bar-wide, #info-bar-single, .navbar{ 
    .gradient(@pageHeaderHighlight, @pageHeaderLightOj, @pageHeaderHighlightPercent);
    background-color: transparent;
 }
 
 
 /* Initial text color for nav links. */
#header-nav-links { 
    color: @linkColor; 
}

/* Selected nav bar text color. */
#header-nav-links a:hover h4,.selected-news #header-nav-links a.news h4,.selected-energy #header-nav-links a.energy h4,.selected-prizes #header-nav-links a.prizes h4 , .selected-help #header-nav-links a.help h4, .selected-activities #header-nav-links a.activities h4, .selected-profile #header-nav-links a.profile h4{
    color: @navBarTextColor;
}

/* Infobar text color (red). */ 
#header-floor-points h3, #header-floor-rank h3, #header-floor-energy h3 {
    color: @infobarTextColor;
    font: bold 18pt Arial,Helvetica,sans-serif;
}

/* White opaque div + grey boarder (Header bars). */
#header-nav-links, #header-round-info, #header-info {
    background: rgba(255, 255, 255,.5);
    .border;
}
 
/* Quest bar. */
#quest-box {
    .gradient(white, @darkOj, @questBarHighlightPercent); 
    .border;  
    color: @textColor; 
} 

/* Quest bar title. */
#quest-title{
    font: bold 20pt Trebuchet MS; 
    font-weight:1200;
}
 

/* ========================== Box Colors ====================== */
/* Generic box. */
.content-box {
    background-color: @content-box-bgColor;  
} 

/* Title bar on widgets. */
.content-box-title { 
    .gradient(@widgetHighlight, @darkOj, @widgetHighlightPercent); 
}

/* Floating border used in energy page. */
.content-box-shadow{  
    border: 3px solid #AAA; 
 }
 
/* Alt row color in lists. */
.alt-row { 
    background: @altRowBGColor;
}
   

/* ========================== ACTIVITY PAGE ====================== */
/* SmartGridGame coloring. */
#activity-category .get-started div, #activity-category .basic-energy div, #activity-category .lights-out div, #activity-category .make-watts div, #activity-category .moving-on div, #activity-category .opala div, #activity-category .wet-wild div, #activity-category .potpourri div {
}

/* Activity color: green. */
.activity,.activity-legend {
    background-color: @SGGActivity;
}

/* Commitment color: blue. */
.commitment,.commitment-legend {
    background-color: @SGGCommitment;
}

/* Event color: orange. */
.event,.event-legend {
    background-color: @SGGEvent;
}

/* "Special" color: yellow. */
.survey,.survey-legend {
    background-color: @SGGSurvey;
}
 
/* Excursion color: red. */
.excursion,.excursion-legend {
    background-color: @SGGExcursion;
} 


/* ========================== LANDING PAGE ====================== */
/* Custom colors for the landing page. */
#landing-page, #landing-intro { 
    .gradient(@landingPageHighlight, @landingPageGradient, @landingPagePercent);
}

 #landing-intro {
    /*background: rgba(239, 214, 120,.8);*/
    backround: @pageHeaderLightOj;
}

/* Container and container subclasses. */
#container{} 

/* For the custom about page div. */
.container-landing-about{
    /*background: rgba(239, 214, 120,.7);*/
    background: @pageHeaderLightOj;
}

/* ========================== Prize PAGE ====================== */
/* Prize widgets. */
#prizes-list-table-header, #prizes-list-table-awarded-header, #prizes-list-table-criteria-header,.prize a{
    background: none ; 
    color: @textColor;
}